<template>
	<view class="container">
		<view class="sea-box padding">
			<text class="text-block">
				基于 uni.chooseImage 实现，相比于 uni-file-picker，
				代码更加复杂，但是相对的，可以手动操作所有细节；
			</text>
			<text class="text-block">当前代码已经包含核心的界面逻辑，只需要考虑对接后台接口即可； </text>
			<text class="text-h4">调用摄像头，需要执行下列操作： </text>
			<text class="text-block">1. 调用摄像头，需要用户进行授权操作，所以需要修改 manifest.json； </text>
			<text class="text-block">2. 如果需要录像，还有 uni.chooseMedia 可选； </text>
		</view>

		<view class="sea-box padding">
			<view class="sea-image-picker">
				<view class="picker-item" @click="chooseFile">
					<uni-icons type="plusempty" size='32' style="color: gray;"></uni-icons>
				</view>

				<view v-for="(item, idx) in files" :key="idx" class="picker-item">
					<image :src="item.src" class="image"></image>
					<view class="remove" @click="remove(idx)">
						<uni-icons type="closeempty" size='24' style="color: #FFF;top: 50%"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import layers from '@/utils/layers';

	/**
	 * 图片上传组件
	 * 
	 * 已经包含核心逻辑，只需要考虑如何对接后台即可
	 */
	export default {
		data() {
			return {
				files: []
			}
		},
		methods: {

			/**
			 * 列表中移除一个文件
			 */
			remove(idx) {
				this.files.splice(idx, 1);
				// 后台异步移除文件
			},

			/**
			 * 选择文件
			 */
			chooseFile() {
				uni.chooseImage({
					count: -1,
					success: (res) => {
						const list = res.tempFiles;
						list.forEach(file => this.pushFile(file));
					}
				})
			},

			/**
			 * 添加文件到文件列表
			 * 
			 * 如果已经提交，则不重复。文件重复的判定标准：文件名、文件大小一致
			 */
			pushFile(f) {
				// 避免重传
				const arr = this.files;
				for (var i = 0; i < arr.length; i++) {
					const file = arr[i];
					if (file.name === f.name && file.size === f.size) {
						layers.msg('重复上传文件：' + file.name)
						return;
					}
				}

				// 二次打包
				const item = {
					ref: f,
					name: f.name,
					src: f.path
				};
				arr.push(item);
			},


			// 上传文件
			uploadFile() {
				if (!this.filePath) {
					layers.msg('请先选择文件：' + file.name)
					return
				}

				uni.showLoading({
					title: '上传中...'
				})

				const uploadTask = uni.uploadFile({
					url: 'https://your-server.com/upload', // 替换为你的服务器地址
					filePath: this.filePath,
					name: 'file',
					formData: {
						'userId': '123', // 可以附加其他表单数据
						'token': 'your-token'
					},
					success: (uploadRes) => {
						uni.hideLoading()
						this.result = JSON.stringify(uploadRes.data)
						layers.msg('上传成功：' + file.name)
					},
					fail: (err) => {
						console.error(err)
						uni.hideLoading()
						layers.msg('上传失败：' + file.name)
					}
				})

				// 监听上传进度
				uploadTask.onProgressUpdate((res) => {
					this.uploadProgress = res.progress
				})
			}
		}
	}
</script>